<!--
 * @Description: 墙布添加
 * 
 * @Author: Edan<Edan>
 * @Date: 2024-07-09 12:49:19
 * @FilePath: /yuxiuproweb/src/views/goods/qb/mods/add.vue
-->

<template>
  <el-dialog
    :close-on-click-modal="false"
    :title="title"
    :visible.sync="shows"
    width="800px"
    append-to-body
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <!-- <el-card class="box-card grid-box-card" shadow="hover">
        <div slot="header">
          <span class="title">商品原料</span>
        </div>
      </el-card> -->
      <el-row>
        <el-col :span="12">
          <el-form-item label="品号" prop="namenum">
            <!-- <strong>{{ form.namenum }}</strong> -->
            <el-input v-model="form.namenum" placeholder="请输入品号" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="是否启用" prop="isuse">
            <el-switch
              v-model="form.isuse"
              :active-value="1"
              :inactive-value="2"
            ></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="上架" prop="isShow">
            <el-switch
              v-model="form.isShow"
              :active-value="1"
              :inactive-value="2"
            ></el-switch>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="品名" prop="name">
            <el-input v-model="form.name" placeholder="请输入品名" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="门幅" prop="productType">
            <el-input v-model="form.productType" placeholder="请输入门幅" />
            <!-- <el-select
              style="width: 100%"
              v-model="form.type"
              placeholder="请选择类型"
              @change="handleGDChange"
            >
              <el-option
                v-for="item in dict.type.md_high_end_customization_type"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select> -->
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="销售价" prop="price">
            <el-input v-model="form.price" placeholder="请输入销售价" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="单位" prop="unit">
            <el-input v-model="form.unit" placeholder="单位" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="面料状态" prop="fabricType">
            <el-select
              style="width: 100%"
              v-model="form.fabricType"
              placeholder="请选择面料状态"
              clearable
            >
              <el-option :label="'素布'" value="1"></el-option>
              <el-option :label="'绣花'" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="营销类别" prop="type">
            <!-- <el-input v-model="form.type" placeholder="请输入营销类别" /> -->
            <el-cascader
              v-model="productType"
              :options="ProductTypeArr"
              :props="defaultProps"
              clearable
              @change="ProductTypeChange"
              style="width: 100%"
            ></el-cascader>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="图片">
            <ImageUpload
              :limit="1"
              :value="form.img"
              :fileSize="5"
              @onUploaded="handleImgUplaoded"
              @onRemoved="handleImgRemoved"
            ></ImageUpload>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="shows = false">取 消</el-button>
    </div>
    <!-- 选择复杂加工 -->
    <machine-part-view
      v-if="machine.show"
      :show.sync="machine.show"
      @on-change="handleMachineChange"
    ></machine-part-view>
  </el-dialog>
</template>

<script>
import {
  getQbGoodsListItem,
  addQbGoodsListItem,
  updateQbGoodsListItem,
} from "@/api/goods/qb";
import ImageUpload from "@/components/ImageUpload/index.vue";
export default {
  components: { ImageUpload },
  props: {
    show: Boolean,
    type: {
      type: String,
      default: "add",
    },
    data: {
      type: Object,
    },
    ProductTypeArr: {
      type: Array,
    },
  },
  data() {
    return {
      machine: {
        show: false,
      },
      // 表单参数
      form: {
        name: "",
        namenum: "",
        fabricType: "",
        fabricId: "",
        img: null,
        isShow: 1,
        isuse: 1,
        price: "",
        productId: null,
        productNumber: "",
        productType: "2.8",
        remark: "",
        searchValue: "",
        specification: "",
        status: 0,
        type: "",
        typeNumber: 0,
        unit: "平方米",
        updateBy: "",
        updateTime: "",
        createBy: "",
        createTime: "",
      },
      // 表单校验
      rules: {
        name: [{ required: true, message: "品名不能为空", trigger: "change" }],
        namenum: [
          { required: true, message: "品号不能为空", trigger: "change" },
        ],
      },
      productType: [],
      // ProductTypeArr: [],
      defaultProps: {
        children: "children",
        label: "typeName",
        value: "typeName",
      },
    };
  },
  computed: {
    title() {
      return {
        add: "添加墙布",
        edit: "修改墙布",
      }[this.type];
    },
    shows: {
      get() {
        return this.show;
      },
      set(newValue) {
        this.$emit("update:show", newValue);
      },
    },
  },
  async mounted() {
    if (this.type === "edit") {
      this.handleUpdate();
    }
    // this.getProductType(); //获取营销类型
  },
  methods: {
    /** 获取详情 */
    handleUpdate() {
      // console.log(this.data);
      getQbGoodsListItem(this.data.productId).then((res) => {
        this.form = res.data;
        if (this.form.type) {
          this.productType = this.form.type.split("/");
        }
      });
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.productId != null) {
            updateQbGoodsListItem(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.shows = false;
              this.$emit("update");
            });
          } else {
            addQbGoodsListItem(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.shows = false;
              this.$emit("update");
            });
          }
        }
      });
    },
    ProductTypeChange(val) {
      console.log(val, this.ProductTypeArr, "ProductTypeChange");
      this.form.type = "";
      this.form.typeNumber = 0;
      for (var i = 0; i < val.length; i++) {
        this.form.type += val[i] + "/";
        if (i == 0) {
          var index = this.ProductTypeArr.findIndex(
            (e) => e.typeName == val[i]
          );
          if (index != -1) {
            this.form.typeNumber = this.ProductTypeArr[index].id;
          }
        }
      }
      if (val.length) {
        this.form.type = this.form.type.slice(0, this.form.type.length - 1);
      }
    },

    // 图片功能
    handleImgUplaoded(imgUrl) {
      console.log(imgUrl);
      this.form.img = imgUrl;
    },
    handleImgRemoved(imgUrl) {
      this.form.img = null;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .el-form-item {
    input {
      text-align: left;
    }
  }
}
.open-right {
  ::v-deep {
    .el-form-item {
      margin-bottom: 0;
    }
  }
}
</style>
